<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getResource()">
        <el-form-item>
          <el-input
            v-model="dataForm.name"
            placeholder="资源名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.type" clearable placeholder="请选择资源类型">
            <el-option label="碑帖欣赏" :value="0"> </el-option>
            <el-option label="国学经典" :value="1"> </el-option>
            <el-option label="书法知识" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.addType" clearable placeholder="请选择类别">
            <el-option label="软笔" :value="0"> </el-option>
            <el-option label="硬笔" :value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getResource()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addResource(0)">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addResourceZip()">批量新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="resourceList"
      stripe
      v-loading="dataListLoading"
      style="width: 100%"
      ref="resource"
    >
      <!-- 扩展资源下的文件集合 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.children" stripe style="width: 100%">
            <el-table-column
              prop="forder"
              header-align="center"
              align="center"
              label="顺序"
            ></el-table-column>
            <el-table-column
              prop="explanationText"
              header-align="center"
              align="center"
              label="释义文本"
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="语音"
              prop="explanationSrc"
            >
              <template slot-scope="scope">
                <audio :src="scope.row.explanationSrc" controls="controls">
                  您的浏览器不支持音频播放
                </audio>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="文件"
              prop="expandFile"
            >
              <template slot-scope="scope">
                <a :href="scope.row.expandFile" type="primary">点击下载</a>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="addFile(1, scope.row.id, scope.row)"
                  >修改</el-button
                >
                <el-button type="text" @click="deleteFile(scope.row.id, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="资源名称"
      ></el-table-column>
      <el-table-column
        prop="resourceIntroduction"
        header-align="center"
        align="center"
        label="资源简介"
      ></el-table-column>
      <el-table-column
        prop="calligrapherIntroduction"
        header-align="center"
        align="center"
        label="书法家简介"
      ></el-table-column>
      <el-table-column
        prop="addType"
        header-align="center"
        align="center"
        label="类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.addType == 0">软笔</span>
          <span v-else>硬笔</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="expandEditionType"
        header-align="center"
        align="center"
        label="类型"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.expandEditionType == 0">碑帖欣赏</span>
          <span v-else-if="scope.row.expandEditionType == 1">国学经典</span>
          <span v-else>书法知识</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="resourceCover"
        header-align="center"
        align="center"
        label="扩资源封面"
      >
        <template slot-scope="scope">
          <el-image :src="scope.row.resourceCover"></el-image> </template
      ></el-table-column>
      <el-table-column
        prop="createtime"
        header-align="center"
        align="center"
        label="创建时间"
      ></el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="addFile(0, scope.row.id, scope.row)"
            >添加文件</el-button
          >
          <el-button style="" type="text" @click="addResource(1, scope.row.id, scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="deleteById(scope.row.id, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <el-dialog
      :visible.sync="dialogResourceVisible"
      :title="type == 0 ? '添加扩展资源信息' : '修改扩展资源信息'"
    >
      <el-form
        :rules="dataRule"
        ref="resourceForm"
        :model="resource"
        label-width="120px"
      >
        <el-form-item label="资源名称" prop="name" style="width: 300px">
          <el-input v-model="resource.name" />
        </el-form-item>
        <el-form-item label="资源简介">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="资源简介"
            v-model="resource.resourceIntroduction"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="书法家简介">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="书法家简介"
            v-model="resource.calligrapherIntroduction"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="资源封面" prop="resourceCover">
          <el-upload
            class="avatar-uploader"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="resource.resourceCover"
              :src="resource.resourceCover"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类别" prop="addType">
          <el-select
            v-model="resource.addType"
            filterable
            placeholder="请选择类别"
          >
            <el-option :key="0" label="软笔" :value="0"> </el-option>
            <el-option :key="1" label="硬笔" :value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源类型" prop="expandEditionType">
          <el-select
            v-model="resource.expandEditionType"
            filterable
            placeholder="请选择资源类型"
          >
            <el-option :key="0" label="碑帖欣赏" :value="0"> </el-option>
            <el-option :key="1" label="国学经典" :value="1"> </el-option>
            <el-option :key="2" label="书法知识" :value="2"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogResourceVisible = false">取 消</el-button>
        <el-button
          :disabled="saveResourceBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogFileVisible"
      :title="type == 0 ? '添加文件信息' : '修改文件信息'"
    >
      <el-form
        :rules="dataRule1"
        ref="fileForm"
        :model="file"
        label-width="120px"
      >
        <el-form-item label="顺序" prop="forder">
          <el-input-number
            v-model="file.forder"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="释义文本">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="释义文本"
            v-model="file.explanationText"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="文件" prop="expandFile">
          <el-upload
            :on-success="handleUploadReadingVideoSuccess"
            :on-remove="handleUploadReadingVideoRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileReadingVideoList"
            :before-upload="beforeVideoUpload"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :limit="1"
            class="upload-demo"
          >
            <el-button size="small" type="primary">上传文件</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持1G，<br />
                支持FLV、MP4视频格式上传<br />
                支持jpg、png图片格式上传<br />
                支持pdf、doc、docx文档格式上传
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
        <el-form-item label="ppt" prop="sfzsPpt">
          <el-upload
            :on-success="handleUploadReadingVideoSuccess2"
            :on-remove="handleUploadReadingVideoRemove2"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileReadingVideoList2"
            :before-upload="beforeVideoUpload2"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :limit="1"
            class="upload-demo"
          >
            <el-button size="small" type="primary">上传ppt</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持1G，<br />
                支持ppt、pptx文档格式上传
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
        <el-form-item label="语音">
          <el-upload
            class="upload-uploader"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :on-success="handleAudioSuccess"
            :before-upload="beforeAudioUpload"
            ref="audio"
            :show-file-list="false"
          >
            <audio :src="file.explanationSrc" controls="controls">
              您的浏览器不支持音频播放
            </audio>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFileVisible = false">取 消</el-button>
        <el-button
          :disabled="saveFileBtnDisabled"
          type="primary"
          @click="saveOrUpdate1"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogBatchResourceVisible"
      title="批量添加扩展资源信息"
       v-loading="dialogBatchResourceLoading"
      element-loading-text="批量新增中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-form
        :rules="dataRule"
        ref="batchResourceForm"
        :model="batchResource"
        label-width="120px"
      >
        <el-form-item label="类别" prop="addType">
          <el-select
            v-model="batchResource.addType"
            filterable
            placeholder="请选择类别"
          >
            <el-option :key="0" label="软笔" :value="0"> </el-option>
            <el-option :key="1" label="硬笔" :value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源类型" prop="expandEditionType">
          <el-select
            v-model="batchResource.expandEditionType"
            filterable
            placeholder="请选择资源类型"
          >
            <el-option :key="0" label="碑帖欣赏" :value="0"> </el-option>
            <el-option :key="1" label="国学经典" :value="1"> </el-option>
            <el-option :key="2" label="书法知识" :value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批量资源包"
          prop="resourceZip">
          <el-upload
            class="upload-demo"
            :limit="1"
            drag
            action="#"
            :auto-upload="false"
            :file-list="resourceZipList"
            :on-success="uploadSuccess"
            :on-exceed="uploadExceed"
            :on-remove="handleUploadRemove"
            :before-remove="beforeVodRemove"
            :on-change="changeZipUpload"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
              <br/>
              只能上传zip文件
            </div>
            
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogBatchResourceVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="resourceZipFormSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dialogBatchResourceLoading: false,
      dialogBatchResourceVisible: false,
      batchResource: {
        // 批量扩展资源对象
        expandEditionType: null,
        resourceZip: "",
        addType: null,
      },
      resourceZipList: [],
      hang: {},
      dataForm: { name: "", type: null, addType: null },
      fileReadingVideoList: [],
      fileReadingVideoList2: [],
      saveBtnDisabled: false, // 下一步按钮是否禁用
      resource: {
        // 扩展资源对象
        id: null,
        name: "",
        resourceCover: "",
        expandEditionType: null,
        resourceIntroduction: "",
        calligrapherIntroduction: "",
        addType: null,
      },
      file: {
        id: null,
        explanationSrc: "",
        explanationText: "",
        expandFile: "",
        sfzsPpt: "",
        rid: null,
        forder: 1,
      }, // 扩展资源文件
      resourceList: [], // 扩展资源集合
      dataListLoading: false, // 加载扩展资源数据
      type: 0, // 0:添加1:修改
      dialogResourceVisible: false, // 添加扩展资源信息对话框
      dialogFileVisible: false, // 添加扩展资源文件对话框
      saveResourceBtnDisabled: false, // 扩展资源信息保存按钮是否禁用
      saveFileBtnDisabled: false, // 扩展资源文件保存按钮是否禁用
      dataRule: {
        // 数据规则
        resourceCover: [{ required: true, message: "封面不能为空" }],
        expandEditionType: [
          { required: true, message: "类型不能为空", trigger: "blur" },
        ],
        addType: [
          { required: true, message: "类别不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        resourceIntroduction: [
          { required: true, message: "资源简介不能为空", trigger: "blur" },
        ],
        calligrapherIntroduction: [
          { required: true, message: "书法家简介不能为空", trigger: "blur" },
        ],
        resourceZip: [
          { required: true, message: "批量压缩包不能为空", trigger: "blur" },
        ],
      },
      dataRule1: {
        // 数据规则
        explanationText: [
          { required: true, message: "文件名称不能为空", trigger: "blur" },
        ],
        explanationSrc: [{ required: true, message: "语音不能为空" }],
        expandFile: [{ required: true, message: "文件不能为空" }],
      },
    };
  },

  activated() {
    // 看看是哪里来的
    this.dataListLoading = true;
    this.getResource();
  },

  methods: {
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getResource();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getResource();
    },
    //文件上传成功
    uploadSuccess(response, file, fileList){
    },
    // 点击确定的时候进行彻底删除
    handleUploadRemove() {
      this.batchResource.resourceZip = '';
      this.resourceZipList = [];
    },
    //上传批量压缩包之前
    changeZipUpload(file,fileList){
      let names = file.name.split(".");
      console.log(names);
      if(names[names.length-1] === "zip"){
        this.batchResource.resourceZip = file.name;
        this.resourceZipList = fileList;
      }else{
        this.batchResource.resourceZip = '';
        this.resourceZipList = [];
        this.$message.error("只能上传zip文件！");
      }
    },
    //文件上传超出数量限制
    uploadExceed(){
      this.$message({
        message: '只能上传一个文件!',
        type: 'error'
      });
    },
    // 视图上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning("想要重新上传文件，请先删除已上传的文件");
    },
    beforeVideoUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (
        fileType !== ".mp4" &&
        fileType !== ".flv" &&
        fileType !== ".pdf" &&
        fileType !== ".doc" &&
        fileType !== ".docx" &&
        fileType !== ".jpg" &&
        fileType !== ".png"
      ) {
        this.$message.error("上传的文件只能是mp4/flv/pdf/doc/docx/jpg/png!");
        return false;
      }
      return true;
    },
    beforeVideoUpload2(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".ppt" && fileType !== ".pptx") {
        this.$message.error("上传的文件只能是ppt/pptx!");
        return false;
      }
      return true;
    },
    // 删除之前，就是点击x的时候
    beforeVodRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 认读视频成功回调
    handleUploadReadingVideoSuccess(response, file, fileList) {
      this.file.expandFile = response.url;
    },
    // 认读视频成功回调
    handleUploadReadingVideoSuccess2(response, file, fileList) {
      this.file.sfzsPpt = response.url;
    },
    // 认读音频点击确定的时候进行彻底删除
    handleUploadReadingVideoRemove() {
      this.file.expandFile = "";
      this.fileReadingVideoList = [];
    },
    handleUploadReadingVideoRemove2() {
      this.file.sfzsPpt = "";
      this.fileReadingVideoList2 = [];
    },
    beforeAudioUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".mp3") {
        this.$message.error("上传音频只能是mp3!");
        return false;
      }
      return true;
    },
    //上传成功后的回调函数
    handleAudioSuccess(response) {
      this.file.explanationSrc = response.url;
    },
    // 超出上传限制
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传一个音(视)频`);
    },
    // 删除音频
    handleRemove(file, fileList) {
      this.file.explanationSrc = "";
    },
    //上传成功后的回调函数
    handleAvatarSuccess(response) {
      this.resource.resourceCover = response.url;
    },
    // 获取固定扩展资源数据
    getResource() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/sf/cbexpandresource/list`),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.dataForm.name,
          type: this.dataForm.type,
          addType: this.dataForm.addType,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.resourceList = data.resourcePage.records;
          this.totalPage = data.resourcePage.total;
        } else {
          this.resourceList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
        for (let i = 0; i < this.resourceList.length; i++) {
          if (this.hang.id == this.resourceList[i].id || this.hang.rid == this.resourceList[i].id) {
            this.$nextTick(() => {
              this.$refs.resource.toggleRowExpansion(this.resourceList[i], true);
            }); 
            break;
          }
        }
        
      });
    },
    // 表单提交
    resourceZipFormSubmit() {
      this.dialogBatchResourceLoading = true;
      let formData = new FormData();
      this.resourceZipList.forEach(item=>{
        formData.append("file",item.raw);
        });
      formData.append("expandEditionType",this.batchResource.expandEditionType);
      formData.append("addType",this.batchResource.addType);
      // 表单验证
      this.$refs["batchResourceForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: 'http://121.41.167.195:8000/api/oss/uploadExpandResourceZip',
            method: "post",
            data: formData,
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "批量导入成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$nextTick(() => {
                    this.$refs.batchResourceForm.resetFields();
                  });
                  this.resourceZipList = [];
                  this.getResource();
                  this.dialogBatchResourceVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
            this.dialogBatchResourceLoading = false;
          });
        }
      });
    },
    // 扩展资源对话框中的保存或修改
    saveOrUpdate() {
      if (this.type == 0) {
        // 添加扩展资源
        this.resourceFormSubmit();
      } else {
        // 修改扩展资源
        this.updateResource();
      }
    },
    // 扩展资源文件对话框中的保存或修改
    saveOrUpdate1() {
      if (this.type == 0) {
        // 添加文件
        this.fileFormSubmit();
      } else {
        // 修改文件
        this.updateFile();
      }
    },
    // 删除文件
    deleteFile(id, row) {
      this.$confirm(`确定对[文件id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbexpandfile/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getResource();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 更新文件信息
    updateFile() {
      this.$refs["fileForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandfile/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.file.id,
                explanationSrc: this.file.explanationSrc,
                explanationText: this.file.explanationText,
                expandFile: this.file.expandFile,
                rid: this.file.rid,
                forder: this.file.forder,
                sfzsPpt: this.file.sfzsPpt,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getResource();
                  this.dialogFileVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    addResourceZip(){
      if(this.$refs.batchResourceForm){
        this.$nextTick(() => {
          this.$refs.batchResourceForm.resetFields(); // this.$refs['resourceForm'].resetFields(); 可能不识别 、还是不识别
        });
      }
      this.dialogBatchResourceVisible = true;
    },
    // 打开对话框，添加、修改
    addResource(status, id, row) {
      this.hang = row;
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.resourceForm.resetFields(); // this.$refs['resourceForm'].resetFields(); 可能不识别 、还是不识别
      });
      if (status == 0) {
        // 添加
        this.type = 0;
        // 清空
        this.resource.id = null;
      } else {
        // 修改
        this.type = 1;
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbexpandresource/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.resource.id = data.cbExpandResource.id;
          this.resource.resourceCover = data.cbExpandResource.resourceCover;
          this.resource.expandEditionType =
            data.cbExpandResource.expandEditionType;
          this.resource.name = data.cbExpandResource.name;
          this.resource.resourceIntroduction =
            data.cbExpandResource.resourceIntroduction;
          this.resource.calligrapherIntroduction =
            data.cbExpandResource.calligrapherIntroduction;
          this.resource.addType = data.cbExpandResource.addType;
        });
      }
      this.dialogResourceVisible = true;
    },
    addFile(status, id, row) {
      this.hang = row;
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.fileForm.resetFields(); // this.$refs['fileForm'].resetFields(); 可能不识别 、还是不识别
      });
      this.file.sfzsPpt = "";
      this.fileReadingVideoList = [];
      this.fileReadingVideoList2 = [];
      if (status == 0) {
        // 添加
        this.type = 0;
        // 清空
        this.file.id = null;
        this.file.rid = id;
      } else {
        // 修改
        this.type = 1;
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbexpandfile/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.file.id = data.cbExpandFile.id;
          this.file.explanationSrc = data.cbExpandFile.explanationSrc;
          this.file.explanationText = data.cbExpandFile.explanationText;
          this.file.expandFile = data.cbExpandFile.expandFile;
          this.file.forder = data.cbExpandFile.forder;
          this.file.sfzsPpt = data.cbExpandFile.sfzsPpt;
          this.file.rid = data.cbExpandFile.rid;
          let obj = {};
          let filenamelist = data.cbExpandFile.expandFile.toString().split("/");
          obj["name"] = filenamelist[filenamelist.length - 1];
          obj["url"] = data.cbExpandFile.expandFile;
          this.fileReadingVideoList.push(obj);
          let ppt = data.cbExpandFile.sfzsPpt
          if(ppt != null && ppt != ""){
            let obj2 = {};
            let filenamelist2 = data.cbExpandFile.sfzsPpt.toString().split("/");
            obj2["name"] = filenamelist2[filenamelist2.length - 1];
            obj2["url"] = data.cbExpandFile.sfzsPpt;
            this.fileReadingVideoList2.push(obj2);
          }
        });
      }
      this.dialogFileVisible = true;
    },
    // 通过扩展资源id删除扩展资源
    deleteById(id, row) {
      this.$confirm(`确定对[扩展资源id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbexpandresource/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getResource();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 表单提交
    resourceFormSubmit() {
      // 表单验证
      this.$refs["resourceForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandresource/save`),
            method: "post",
            data: this.$http.adornData(
              {
                name: this.resource.name,
                resourceIntroduction: this.resource.resourceIntroduction,
                calligrapherIntroduction:
                  this.resource.calligrapherIntroduction,
                resourceCover: this.resource.resourceCover,
                expandEditionType: this.resource.expandEditionType,
                addType: this.resource.addType,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.hang = {"id": data.resource.id}
                  this.getResource();
                  this.dialogResourceVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 文件表单提交
    fileFormSubmit() {
      // 表单验证
      this.$refs["fileForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandfile/save`),
            method: "post",
            data: this.$http.adornData(
              {
                rid: this.file.rid,
                explanationSrc: this.file.explanationSrc,
                explanationText: this.file.explanationText,
                expandFile: this.file.expandFile,
                forder: this.file.forder,
                sfzsPpt: this.file.sfzsPpt,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getResource();
                  this.dialogFileVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    updateResource() {
      // 表单验证,只需要验证扩展资源名称
      this.$refs["resourceForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbexpandresource/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.resource.id,
                resourceCover: this.resource.resourceCover,
                expandEditionType: this.resource.expandEditionType,
                name: this.resource.name,
                resourceIntroduction: this.resource.resourceIntroduction,
                calligrapherIntroduction:
                  this.resource.calligrapherIntroduction,
                addType: this.resource.addType,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getResource();
                  this.dialogResourceVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
